<div class="application-preferences">
    <div class="app-prefs-section general">
        <div class="app-prefs-title header-nav" style="height: 10px;">
            <div class="header-nav-content">
                <h1 class="typography-header-emphasized">General Settings</h1>
            </div>
        </div>
        <ul class="settings-list general">
            <li class="app-prefs-toggle" id="checkForUpdatesToggle">
                <span class="typography-title-3-tall">Check For Updates</span>
                <label class="toggle-element list-element">
                    <input checked id="checkForUpdates" type="checkbox">
                    <span class="slider"></span>
                </label>
                <span class="app-prefs-help typography-title-3-tall">Automatically check for updates on launch. (Windows Only)</span>
            </li>
            <li class="app-prefs-toggle">
                <span class="typography-title-3-tall">Incognito Mode</span>
                <label class="toggle-element list-element">
                    <input checked id="incognitoMode" type="checkbox">
                    <span class="slider"></span>
                </label>
                <span class="app-prefs-help typography-title-3-tall">Music played in this app will not be viewable by your followers on Apple Music and will no longer influence the recommendations you get in 'Listen Now'.
                    This will also disable updates to various additions in the application. (Such as DiscordRPC and LastFM).</span>
            </li>
            <li class="app-prefs-dropdown">
                <label class="typography-title-3-tall" for="playbackNotifications">Show notifications on Song
                    Change</label>
                <select class="form-dropdown-select list-element" id="playbackNotifications"
                        name="playbackNotifications">
                    <option disabled>Select one</option>
                    <option value=''>Disabled</option>
                    <option value=true>Enabled</option>
                    <option value='minimized'>Enabled (Notifications when Minimized)</option>
                </select>
                <span class="app-prefs-help typography-title-3-tall">Enabling this means you will get notifications when
                    you change song. The minimized option forces notifications to only appear if the app is hidden /
                    minimized.</span>
            </li>
            <li class="app-prefs-toggle">
                <span class="typography-title-3-tall">Show song name as tray icon tooltip</span>
                <label class="toggle-element list-element">
                    <input checked id="trayTooltipSongName" type="checkbox">
                    <span class="slider"></span>
                </label>
                <span class="app-prefs-help typography-title-3-tall">Enabling this option allows you to see the song
                    name in the tooltip on the taskbar when the application is minimized to the tray.</span>
            </li>
            <li class="app-prefs-dropdown">
                <label class="typography-title-3-tall" for="startupPage">Startup page</label>
                <select class="form-dropdown-select list-element" id="startupPage" name="startupPage">
                    <option disabled>Select one</option>
                    <option value='browse'>Browse</option>
                    <option value='listen-now'>Listen now</option>
                    <option value='radio'>Radio</option>
                    <option value='library/recently-added'>Recently Added</option>
                    <option value='library/albums'>Albums</option>
                    <option value='library/songs'>Songs</option>
                    <option value='library/made-for-you'>Made for You</option>
                </select>
                <span class="app-prefs-help typography-title-3-tall">Select what page you wish to be placed on when you
                    start the application.</span>
            </li>
            <li class="app-prefs-toggle">
                <span class="typography-title-3-tall">Allow statistics to be collected when errors or crashes
                    occur</span>
                <label class="toggle-element list-element">
                    <input checked id="analyticsEnabled" type="checkbox">
                    <span class="slider"></span>
                </label>
                <span class="app-prefs-help typography-title-3-tall">These logs when enabled allow us to fix bugs and
                    errors that may occur during your listening sessions to better improve the application. We
                    understand if you're not comfortable with them on, but it helps us out immensely in figuring out
                    widespread issues. (Note: We do not gather personal information, only stuff that shows to you as an
                    error in the code.)</span>
            </li>
            <li class="app-prefs-divider header-nav">
                <h2 class="shelf-title">Discord Rich Presence</h2>
                <span class="app-prefs-help typography-title-3-tall">These settings are for managing how you display
                    your status on Discord. You must have 'Display current activity as status message.' turned on in
                    your Discord settings for the song to be shown.</span>
            </li>
            <li class="app-prefs-dropdown">
                <label class="typography-title-3-tall" for="discordRPC">Display song data as activity on Discord</label>
                <select class="form-dropdown-select list-element" id="discordRPC" name="discordRPC">
                    <option disabled>Select one</option>
                    <option value='am-title'>Enabled (Display 'Apple Music' as title)</option>
                    <option value='ame-title'>Enabled (Display 'Apple Music Electron' as title)</option>
                    <option value=''>Disabled</option>
                </select>
            </li>
            <li class="app-prefs-toggle">
                <span class="typography-title-3-tall">Clear activity on pause</span>
                <label class="toggle-element list-element">
                    <input checked id="discordClearActivityOnPause" type="checkbox">
                    <span class="slider"></span>
                </label>
                <span class="app-prefs-help typography-title-3-tall">With this disabled your status will show a
                    Pause/Play icon whenever you are playing or have a song paused. When you enable this, it is replaced
                    with a branch icon (Nightly / Stable) and a version title when you hover.</span>
            </li>
            <li class="app-prefs-divider header-nav">
                <h2 class="shelf-title">LastFM</h2>
            </li>
            <li class="app-prefs-button">
                <span class="typography-title-3-tall">LastFM Account</span>
                <label class="list-button list-element" id="lfmConnect"
                       onclick="AMSettings.lastfm.LastFMAuthenticate()">Connect</label>
            </li>
            <li class="app-prefs-toggle">
                <span class="typography-title-3-tall">Remove featuring artists from song title</span>
                <label class="toggle-element list-element">
                    <input checked id="lastfmRemoveFeaturingArtists" type="checkbox">
                    <span class="slider"></span>
                </label>
                <span class="app-prefs-help typography-title-3-tall">Enabling this will remove the featuring artists
                    from the scrobbled data, meaning on LastFM only the primary artist will be shown.</span>
            </li>
            <li class="app-prefs-toggle">
                <span class="typography-title-3-tall">Enable now playing</span>
                <label class="toggle-element list-element">
                    <input checked id="lastfmNowPlaying" type="checkbox">
                    <span class="slider"></span>
                </label>
                <span class="app-prefs-help typography-title-3-tall">Enabling this will display what song you are 
                    playing on LastFM.</span>
            </li>
            <li class="app-prefs-dropdown">
                <label class="typography-title-3-tall" for="lastfmScrobbleDelay">Scrobble delay</label>
                <input class="form-dropdown-select list-element" id="lastfmScrobbleDelay" name="lastfmScrobbleDelay"
                       type="number"/>
                <span class="app-prefs-help typography-title-3-tall">Sets the wait time before current song is added to scrobble list.</span>
            </li>
        </ul>
    </div>
    <div class="app-prefs-section visual">
        <div class="app-prefs-title header-nav" style="height: 10px;">
            <div class="header-nav-content">
                <h1 class="typography-header-emphasized">Appearance</h1>
            </div>
        </div>
        <ul class="settings-list visual">
            <li class="app-prefs-dropdown">
                <label class="typography-title-3-tall" for="theme">Theme</label>
                <select class="form-dropdown-select list-element" id="theme" name="theme">
                    <option disabled>Select one</option>
                    <option value='default'>Default</option>
                </select>
                <span class="app-prefs-help typography-title-3-tall">You will need to restart the application in order
                    for the default themes to be populated. You can preview all the themes <a href="#"
                                                                                              onclick="window.open('https://github.com/Apple-Music-Electron/Apple-Music-Electron/wiki/Theme-Preview-Images')">here</a>.</span>
            </li>
            <li class="app-prefs-button">
                <span class="typography-title-3-tall">Theme Options</span>
                <label class="list-button list-element" id="themeOptions"
                       onclick="AMStyling.showThemeOptions()">Theme Options</label>
                <span class="app-prefs-help typography-title-3-tall">Configure the selected theme</span>
            </li>
            <li class="app-prefs-button">
                <span class="typography-title-3-tall">Update Themes</span>
                <label class="list-button list-element" id="updateThemes"
                       onclick="AMSettings.themes.updateThemes()">Update Themes</label>
                <span class="app-prefs-help typography-title-3-tall" style="color: var(--systemRed);">Running this will
                    delete the 'themes' directory. If you have made a theme, store it elsewhere until it says
                    Updated.</span>
            </li>
            <li class="app-prefs-dropdown">
                <label class="typography-title-3-tall" for="frameType">Application Frame</label>
                <select class="form-dropdown-select list-element" id="frameType" name="frameType">
                    <option disabled>Select one</option>
                    <option value=''>Disabled</option>
                    <option value='mac-right'>macOS Emulation (Right)</option>
                    <option value='mac'>macOS Emulation</option>
                </select>
                <span class="app-prefs-help typography-title-3-tall">macOS Emulation shows the 'stoplights' that are
                    well known for all macOS users and adjusts other UI elements to resemble the macOS Music App.
                    Selecting the right option shows a more Windows-like representation with the stoplights replacing
                    the usual close, minimize and maximize buttons. For macOS users its suggested that you disable this
                    for the best experience. Having this disabled will make the application use the operating system's
                    frame.</span>
            </li>
            <li class="app-prefs-divider header-nav">
                <h2 class="shelf-title">Transparency Configuration</h2>
                <span class="app-prefs-help typography-title-3-tall">Here you can configure the transparency options for
                    the window. Transparency only works on certain systems, so read the descriptions of each setting. It
                    is not advised to use transparency on platforms other than Windows or macOS.</span>
            </li>
            <li class="app-prefs-dropdown">
                <label class="typography-title-3-tall" for="transparencyEffect">Transparency Effect</label>
                <select class="form-dropdown-select list-element" id="transparencyEffect" name="transparencyEffect">
                    <option disabled>Select one</option>
                    <option value=''>Disabled</option>
                    <option value='blur'>Blur Behind</option>
                </select>
                <span class="app-prefs-help typography-title-3-tall">Sets the type of Windows transparency effect,
                    either 'acrylic', 'blur' or leave it empty to disable it. Changing the transparency blur type can
                    improve performance and compatibility with older hardware and systems.</span>
            </li>
            <li class="app-prefs-dropdown">
                <label class="typography-title-3-tall" for="transparencyTheme">Transparency Theme</label>
                <input class="form-dropdown-select list-element" id="transparencyTheme" name="transparencyTheme"/>
                <span class="app-prefs-help typography-title-3-tall">Sets color of acrylic effect. Can be 'light',
                    'dark', 'appearance-based' or a hex color code with alpha ('#0f0f0f00').</span>
            </li>
            <li class="app-prefs-toggle" id="transparencyDisableBlurToggleLI">
                <span class="typography-title-3-tall">Disable Transparency when Unfocused (Acrylic Only)</span>
                <label class="toggle-element list-element">
                    <input checked id="transparencyDisableBlur" type="checkbox">
                    <span class="slider"></span>
                </label>
                <span class="app-prefs-help typography-title-3-tall">If enabled, acrylic effect will be disabled when
                    the window loses focus, to mimic the behaviour of normal UWP apps.</span>
            </li>
            <li class="app-prefs-dropdown">
                <label class="typography-title-3-tall" for="transparencyMaximumRefreshRate">Use Custom Window Refresh
                    Rate</label>
                <select class="form-dropdown-select list-element" id="transparencyMaximumRefreshRate"
                        name="transparencyMaximumRefreshRate">
                    <option disabled>Select one</option>
                    <option value=''>Disabled</option>
                    <option value='30'>30</option>
                    <option value='60'>60</option>
                    <option value='144'>144</option>
                    <option value='175'>175</option>
                    <option value='240'>240</option>
                    <option value='360'>30</option>
                </select>
                <span class="app-prefs-help typography-title-3-tall">Use custom window resize/move handler for
                    performance. You can set the maximum refresh rate that the application uses. Disabled would default
                    to 60hz.</span>
            </li>
            <li class="app-prefs-divider header-nav">
                <h2 class="shelf-title">Lyrics</h2>
            </li>
            <li class="app-prefs-toggle">
                <span class="typography-title-3-tall">Enable Musixmatch Lyrics</span>
                <label class="toggle-element list-element">
                    <input checked id="mxmon" type="checkbox">
                    <span class="slider"></span>
                </label>
                <span class="app-prefs-help typography-title-3-tall">Less stable, but allows for lyrics translation and
                    better lyrics detection</span>
            </li>
            <li class="app-prefs-toggle">
                <span class="typography-title-3-tall">Enable Youtube Lyrics (MVs only)</span>
                <label class="toggle-element list-element">
                    <input checked id="yton" type="checkbox">
                    <span class="slider"></span>
                </label>
                <span class="app-prefs-help typography-title-3-tall">(NOT RECOMMENDED!) Better timings on some Music Video, also better lyrics on Selected Tracks (e.g JP AMVs)</span>
            </li>
            <li class="app-prefs-dropdown">
                <label class="typography-title-3-tall" for="mxmlanguage">Lyrics translation language</label>
                <select class="form-dropdown-select list-element" id="mxmlanguage" name="mxmlanguage">
                    <option value='disabled'>Disabled</option>
                    <option value='ab'>Abkhazian</option>
                    <option value='aa'>Afar</option>
                    <option value='af'>Afrikaans</option>
                    <option value='ak'>Akan</option>
                    <option value='sq'>Albanian</option>
                    <option value='am'>Amharic</option>
                    <option value='ar'>Arabic</option>
                    <option value='an'>Aragonese</option>
                    <option value='hy'>Armenian</option>
                    <option value='as'>Assamese</option>
                    <option value='a5'>Assamese-romaji</option>
                    <option value='a3'>Asturian</option>
                    <option value='av'>Avaric</option>
                    <option value='ae'>Avestan</option>
                    <option value='ay'>Aymara</option>
                    <option value='az'>Azerbaijani</option>
                    <option value='bm'>Bambara</option>
                    <option value='ba'>Bashkir</option>
                    <option value='eu'>Basque</option>
                    <option value='b1'>Bavarian</option>
                    <option value='be'>Belarusian</option>
                    <option value='bn'>Bengali</option>
                    <option value='b5'>Bengali-romaji</option>
                    <option value='bh'>Bihari languages</option>
                    <option value='b3'>Bishnupriya</option>
                    <option value='bi'>Bislama</option>
                    <option value='bs'>Bosnian</option>
                    <option value='br'>Breton</option>
                    <option value='bg'>Bulgarian</option>
                    <option value='my'>Burmese</option>
                    <option value='ca'>Catalan</option>
                    <option value='c2'>Cebuano</option>
                    <option value='b2'>Central bikol</option>
                    <option value='c3'>Central kurdish</option>
                    <option value='ch'>Chamorro</option>
                    <option value='c1'>Chavacano</option>
                    <option value='ce'>Chechen</option>
                    <option value='ny'>Chichewa</option>
                    <option value='zh'>Chinese (simplified)</option>
                    <option value='z1'>Chinese (traditional)</option>
                    <option value='rz'>Chinese-romaji</option>
                    <option value='cu'>Church slavic</option>
                    <option value='cv'>Chuvash</option>
                    <option value='kw'>Cornish</option>
                    <option value='co'>Corsican</option>
                    <option value='cr'>Cree</option>
                    <option value='c4'>Creoles and pidgins</option>
                    <option value='c5'>Creoles and pidgins, english based</option>
                    <option value='c6'>Creoles and pidgins, french-based</option>
                    <option value='c7'>Creoles and pidgins, portuguese-based</option>
                    <option value='hr'>Croatian</option>
                    <option value='cs'>Czech</option>
                    <option value='da'>Danish</option>
                    <option value='d1'>Dimli (individual language)</option>
                    <option value='dv'>Divehi</option>
                    <option value='d3'>Dotyali</option>
                    <option value='nl'>Dutch</option>
                    <option value='dz'>Dzongkha</option>
                    <option value='m2'>Eastern mari</option>
                    <option value='a2'>Egyptian arabic</option>
                    <option value='e1'>Emilian-romagnol</option>
                    <option value='en'>English</option>
                    <option value='m6'>Erzya</option>
                    <option value='eo'>Esperanto</option>
                    <option value='et'>Estonian</option>
                    <option value='ee'>Ewe</option>
                    <option value='fo'>Faroese</option>
                    <option value='h1'>Fiji hindi</option>
                    <option value='fj'>Fijian</option>
                    <option value='f1'>Filipino</option>
                    <option value='fi'>Finnish</option>
                    <option value='fr'>French</option>
                    <option value='f2'>Frisian, northern</option>
                    <option value='fy'>Frisian, western</option>
                    <option value='ff'>Fulah</option>
                    <option value='gl'>Galician</option>
                    <option value='lg'>Ganda</option>
                    <option value='ka'>Georgian</option>
                    <option value='de'>German</option>
                    <option value='n2'>German, low</option>
                    <option value='g1'>Goan konkani</option>
                    <option value='el'>Greek</option>
                    <option value='e2'>Greek-romaji</option>
                    <option value='kl'>Greenlandic</option>
                    <option value='gn'>Guarani</option>
                    <option value='gu'>Gujarati</option>
                    <option value='g2'>Gujarati-romaji</option>
                    <option value='ht'>Haitian creole</option>
                    <option value='ha'>Hausa</option>
                    <option value='he'>Hebrew</option>
                    <option value='hz'>Herero</option>
                    <option value='hi'>Hindi</option>
                    <option value='h3'>Hindi-romaji</option>
                    <option value='ho'>Hiri motu</option>
                    <option value='hu'>Hungarian</option>
                    <option value='is'>Icelandic</option>
                    <option value='io'>Ido</option>
                    <option value='ig'>Igbo</option>
                    <option value='i1'>Iloko</option>
                    <option value='id'>Indonesian</option>
                    <option value='ia'>Interlingua</option>
                    <option value='ie'>Interlingue</option>
                    <option value='iu'>Inuktitut</option>
                    <option value='ik'>Inupiaq</option>
                    <option value='ga'>Irish</option>
                    <option value='it'>Italian</option>
                    <option value='ja'>Japanese</option>
                    <option value='rj'>Japanese-romaji</option>
                    <option value='jv'>Javanese</option>
                    <option value='x1'>Kalmyk</option>
                    <option value='kn'>Kannada</option>
                    <option value='k2'>Kannada-romaji</option>
                    <option value='kr'>Kanuri</option>
                    <option value='k1'>Karachay-balkar</option>
                    <option value='ks'>Kashmiri</option>
                    <option value='kk'>Kazakh</option>
                    <option value='km'>Khmer, central</option>
                    <option value='ki'>Kikuyu</option>
                    <option value='rw'>Kinyarwanda</option>
                    <option value='ky'>Kirghiz</option>
                    <option value='kv'>Komi</option>
                    <option value='kg'>Kongo</option>
                    <option value='ko'>Korean</option>
                    <option value='rk'>Korean-romaji</option>
                    <option value='kj'>Kuanyama</option>
                    <option value='ku'>Kurdish</option>
                    <option value='lo'>Lao</option>
                    <option value='la'>Latin</option>
                    <option value='lv'>Latvian</option>
                    <option value='l1'>Lezghian</option>
                    <option value='li'>Limburgish</option>
                    <option value='ln'>Lingala</option>
                    <option value='lt'>Lithuanian</option>
                    <option value='j1'>Lojban</option>
                    <option value='l2'>Lombard</option>
                    <option value='lu'>Luba-katanga</option>
                    <option value='lb'>Luxembourgish</option>
                    <option value='mk'>Macedonian</option>
                    <option value='m1'>Maithili</option>
                    <option value='mg'>Malagasy</option>
                    <option value='ms'>Malay</option>
                    <option value='ml'>Malayalam</option>
                    <option value='m8'>Malayalam-romaji</option>
                    <option value='mt'>Maltese</option>
                    <option value='gv'>Manx</option>
                    <option value='mi'>Maori</option>
                    <option value='mr'>Marathi</option>
                    <option value='m9'>Marathi-romaji</option>
                    <option value='mh'>Marshallese</option>
                    <option value='m7'>Mazanderani</option>
                    <option value='m3'>Minangkabau</option>
                    <option value='x2'>Mingrelian</option>
                    <option value='m5'>Mirandese</option>
                    <option value='mo'>Moldavian</option>
                    <option value='mn'>Mongolian</option>
                    <option value='n4'>Nahuatl</option>
                    <option value='na'>Nauru</option>
                    <option value='nv'>Navajo</option>
                    <option value='nd'>Ndebele, north</option>
                    <option value='nr'>Ndebele, south</option>
                    <option value='ng'>Ndonga</option>
                    <option value='n1'>Neapolitan</option>
                    <option value='n3'>Nepal bhasa</option>
                    <option value='ne'>Nepali</option>
                    <option value='n5'>Nepali-romaji</option>
                    <option value='l3'>Northern luri</option>
                    <option value='no'>Norwegian</option>
                    <option value='nb'>Norwegian bokmål</option>
                    <option value='nn'>Norwegian nynorsk</option>
                    <option value='oc'>Occitan</option>
                    <option value='oj'>Ojibwa</option>
                    <option value='or'>Oriya</option>
                    <option value='o1'>Oriya-romaji</option>
                    <option value='om'>Oromo</option>
                    <option value='os'>Ossetian</option>
                    <option value='pi'>Pali</option>
                    <option value='p1'>Pampanga</option>
                    <option value='pa'>Panjabi</option>
                    <option value='p5'>Panjabi-romaji</option>
                    <option value='fa'>Persian</option>
                    <option value='p2'>Pfaelzisch</option>
                    <option value='p3'>Piemontese</option>
                    <option value='pl'>Polish</option>
                    <option value='pt'>Portuguese</option>
                    <option value='ps'>Pushto</option>
                    <option value='qu'>Quechua</option>
                    <option value='ro'>Romanian</option>
                    <option value='rm'>Romansh</option>
                    <option value='rn'>Rundi</option>
                    <option value='b4'>Russia buriat</option>
                    <option value='ru'>Russian</option>
                    <option value='r2'>Russian-romaji</option>
                    <option value='r1'>Rusyn</option>
                    <option value='se'>Sami, northern</option>
                    <option value='sm'>Samoan</option>
                    <option value='sg'>Sango</option>
                    <option value='sa'>Sanskrit</option>
                    <option value='s4'>Sanskrit-romaji</option>
                    <option value='sc'>Sardinian</option>
                    <option value='s3'>Scots</option>
                    <option value='gd'>Scottish gaelic</option>
                    <option value='sr'>Serbian</option>
                    <option value='sh'>Serbo-croatian</option>
                    <option value='sn'>Shona</option>
                    <option value='ii'>Sichuan yi</option>
                    <option value='s2'>Sicilian</option>
                    <option value='sd'>Sindhi</option>
                    <option value='si'>Sinhala</option>
                    <option value='sk'>Slovak</option>
                    <option value='sl'>Slovenian</option>
                    <option value='so'>Somali</option>
                    <option value='d2'>Sorbian, lower</option>
                    <option value='h2'>Sorbian, upper</option>
                    <option value='st'>Sotho, southern</option>
                    <option value='a4'>South azerbaijani</option>
                    <option value='es'>Spanish</option>
                    <option value='su'>Sundanese</option>
                    <option value='sw'>Swahili</option>
                    <option value='ss'>Swati</option>
                    <option value='sv'>Swedish</option>
                    <option value='tl'>Tagalog</option>
                    <option value='ty'>Tahitian</option>
                    <option value='tg'>Tajik</option>
                    <option value='ta'>Tamil</option>
                    <option value='t2'>Tamil-romaji</option>
                    <option value='tt'>Tatar</option>
                    <option value='te'>Telugu</option>
                    <option value='t3'>Telugu-romaji</option>
                    <option value='th'>Thai</option>
                    <option value='t4'>Thai-romaji</option>
                    <option value='bo'>Tibetan</option>
                    <option value='ti'>Tigrinya</option>
                    <option value='to'>Tonga (tonga islands)</option>
                    <option value='a1'>Tosk albanian</option>
                    <option value='ts'>Tsonga</option>
                    <option value='tn'>Tswana</option>
                    <option value='tr'>Turkish</option>
                    <option value='tk'>Turkmen</option>
                    <option value='t1'>Tuvinian</option>
                    <option value='tw'>Twi</option>
                    <option value='ug'>Uighur</option>
                    <option value='uk'>Ukrainian</option>
                    <option value='ur'>Urdu</option>
                    <option value='u1'>Urdu-romaji</option>
                    <option value='uz'>Uzbek</option>
                    <option value='ve'>Venda</option>
                    <option value='v1'>Venetian</option>
                    <option value='v2'>Veps</option>
                    <option value='vi'>Vietnamese</option>
                    <option value='v3'>Vlaams</option>
                    <option value='vo'>Volapük</option>
                    <option value='wa'>Walloon</option>
                    <option value='w1'>Waray</option>
                    <option value='cy'>Welsh</option>
                    <option value='m4'>Western mari</option>
                    <option value='p4'>Western panjabi</option>
                    <option value='wo'>Wolof</option>
                    <option value='w2'>Wu chinese</option>
                    <option value='xh'>Xhosa</option>
                    <option value='s1'>Yakut</option>
                    <option value='yi'>Yiddish</option>
                    <option value='yo'>Yoruba</option>
                    <option value='y1'>Yue chinese</option>
                    <option value='za'>Zhuang</option>
                    <option value='zu'>Zulu</option>
                </select>
                <span class="app-prefs-help typography-title-3-tall">(Only when Musixmatch Lyrics / Youtube Lyrics is enabled) Select the
                    targeted language for translated lyrics</span>
            </li>
            <li class="app-prefs-divider header-nav">
                <h2 class="shelf-title">Miscellaneous Options</h2>
                <span class="app-prefs-help typography-title-3-tall">Various options allowing you to adjust the user
                    interface to your preference.</span>
            </li>
            <li class="app-prefs-toggle">
                <span class="typography-title-3-tall">Streaming Mode</span>
                <label class="toggle-element list-element">
                    <input checked id="streamerMode" type="checkbox">
                    <span class="slider"></span>
                </label>
                <span class="app-prefs-help typography-title-3-tall">Removes certain UI elements and has unique scaling
                    properties.</span>
            </li>
            <li class="app-prefs-toggle">
                <span class="typography-title-3-tall">Remove Upsell</span>
                <label class="toggle-element list-element">
                    <input checked id="removeUpsell" type="checkbox">
                    <span class="slider"></span>
                </label>
                <span class="app-prefs-help typography-title-3-tall">Removes the Open in iTunes and Exit Beta
                    Buttons.</span>
            </li>
            <li class="app-prefs-toggle">
                <span class="typography-title-3-tall">Remove Apple Music Logo</span>
                <label class="toggle-element list-element">
                    <input checked id="removeAppleLogo" type="checkbox">
                    <span class="slider"></span>
                </label>
                <span class="app-prefs-help typography-title-3-tall">Removes the Apple Music Logo and moves search bar
                    up.</span>
            </li>
            <li class="app-prefs-toggle">
                <span class="typography-title-3-tall">Remove Footer</span>
                <label class="toggle-element list-element">
                    <input checked id="removeFooter" type="checkbox">
                    <span class="slider"></span>
                </label>
                <span class="app-prefs-help typography-title-3-tall">Removes the Apple Music footer.</span>
            </li>
            <li class="app-prefs-toggle">
                <span class="typography-title-3-tall">Remove Scrollbars</span>
                <label class="toggle-element list-element">
                    <input checked id="removeScrollbars" type="checkbox">
                    <span class="slider"></span>
                </label>
                <span class="app-prefs-help typography-title-3-tall">Currently, the scrollbar is experimental and
                    incomplete. It is recommended to leave this on.</span>
            </li>
            <li class="app-prefs-toggle">
                <span class="typography-title-3-tall">Use Album Art Click to move to Current Playlist</span>
                <label class="toggle-element list-element">
                    <input checked id="albumartNPPLaylist" type="checkbox">
                    <span class="slider"></span>
                </label>
                <span class="app-prefs-help typography-title-3-tall">Click album art to go to currently playing Playlist/Album</span>
            </li>
            <li class="app-prefs-toggle" id="useOperatingSystemAccentToggleLI">
                <span class="typography-title-3-tall">Use OS Accent as Application Accent</span>
                <label class="toggle-element list-element">
                    <input checked id="useOperatingSystemAccent" type="checkbox">
                    <span class="slider"></span>
                </label>
                <span class="app-prefs-help typography-title-3-tall">Force the application to use your operating
                    systems' accent.</span>
            </li>
            <li class="app-prefs-dropdown">
                <label class="typography-title-3-tall" for="scaling">Interface Scaling Multiplier</label>
                <input class="form-dropdown-select list-element" type="number" id="scaling" name="scaling" min="0.1"
                       max="4" step="0.05"/>
                <span class="app-prefs-help typography-title-3-tall">Set the scale that you would like the interface sized at.</span>
            </li>
        </ul>
    </div>
    <div class="app-prefs-section audio">
        <div class="app-prefs-title header-nav" style="height: 10px;">
            <div class="header-nav-content">
                <h1 class="typography-header-emphasized">Audio Settings</h1>
            </div>
        </div>
        <ul class="settings-list audio">
            <li class="app-prefs-dropdown">
                <label class="typography-title-3-tall" for="audioQuality">Audio Quality</label>
                <select class="form-dropdown-select list-element" id="audioQuality" name="audioQuality">
                    <option disabled>Select one</option>
                    <option value='auto'>Automatic (Default)</option>
                    <option value='extreme'>Extreme (990kbps)</option>
                    <option value='high'>High (256kbps)</option>
                    <option value='standard'>Standard (64kbps)</option>
                </select>
                <span class="app-prefs-help typography-title-3-tall">Allows the user to select a preferred audio bitrate
                    for music playback. NOTE: This may not work on all songs. Extreme mode can have the side effects of
                    high CPU Usage.</span>
            </li>
            <li class="app-prefs-toggle">
                <span class="typography-title-3-tall">Seamless Audio Transitions</span>
                <label class="toggle-element list-element">
                    <input checked id="seamlessAudioTransitions" type="checkbox">
                    <span class="slider"></span>
                </label>
                <span class="app-prefs-help typography-title-3-tall">Reduces or completely removes the delay between
                    songs providing a smooth audio experience.</span>
            </li>
            <li class="app-prefs-dropdown">
                <label class="typography-title-3-tall" for="castingBitDepth">Chromecast Audio Bit Depth</label>
                <select class="form-dropdown-select list-element" id="castingBitDepth" name="castingBitDepth">
                    <option value='16'>16-bit</option>
                    <option value='24'>24-bit</option>
                </select>
                <span class="app-prefs-help typography-title-3-tall">Audio Casting bit-depth, all devices should support 16-bit
                    audio, however 24-bit preserves quality from original audio (it is sometimes not 
                    supported by cheap / old Chromecast devices).
                </span>
            </li>
            <li class="app-prefs-toggle">
                <span class="typography-title-3-tall">Enable DLNA casting</span>
                <label class="toggle-element list-element">
                    <input checked id="enableDLNA" type="checkbox">
                    <span class="slider"></span>
                </label>
                <span class="app-prefs-help typography-title-3-tall">DLNA is supported by a wide variety of devices, however a large 
                    number of them don't support live radio (e.g LG TVs).
                </span>
            </li>
        </ul>
    </div>
    <div class="app-prefs-section window">
        <div class="app-prefs-title header-nav" style="height: 10px;">
            <div class="header-nav-content">
                <h1 class="typography-header-emphasized">Startup and Window Behavior</h1>
            </div>
        </div>
        <ul class="settings-list window">
            <li class="app-prefs-dropdown">
                <label class="typography-title-3-tall" for="appStartupBehavior">Open Apple Music automatically after
                    login</label>
                <select class="form-dropdown-select list-element" id="appStartupBehavior" name="appStartupBehavior">
                    <option disabled>Select one</option>
                    <option value=''>Disabled</option>
                    <option value='true'>Enabled</option>
                    <option value='hidden'>Enabled (Application is Hidden)</option>
                    <option value='minimized'>Enabled (Application is Minimized)</option>
                </select>
            </li>
            <li class="app-prefs-toggle">
                <span class="typography-title-3-tall">Close button should minimize Apple Music</span>
                <label class="toggle-element list-element">
                    <input checked id="closeButtonMinimize" type="checkbox">
                    <span class="slider"></span>
                </label>
            </li>
            <li class="app-prefs-toggle">
                <span class="typography-title-3-tall">Show window always on top</span>
                <label class="toggle-element list-element">
                    <input checked id="alwaysOnTop" type="checkbox">
                    <span class="slider"></span>
                </label>
                <span class="app-prefs-help typography-title-3-tall">This will make the application persist above all
                    other windows. Best used for mini player usage.</span>
            </li>
        </ul>
    </div>
    <div class="app-prefs-section advanced">
        <div class="app-prefs-title header-nav" onclick="AMSettings.revealCollapse()" style="height: 10px;">
            <div class="header-nav-content">
                <h1 class="typography-header-emphasized">Advanced Settings</h1>
            </div>
            <img alt="Open Category" class="header-nav-image" src="ameres://icons/webui/down.svg">
        </div>
        <ul class="settings-list advanced" id="advanced">
            <li class="app-prefs-dropdown">
                <label class="typography-title-3-tall" for="forceApplicationMode">Application Mode</label>
                <select class="form-dropdown-select list-element" id="forceApplicationMode" name="forceApplicationMode">
                    <option disabled>Select one</option>
                    <option value='dark'>Dark</option>
                    <option value='light'>Light</option>
                    <option value='system'>Sync with computer</option>
                </select>
            </li>
            <li class="app-prefs-toggle">
                <span class="typography-title-3-tall">Hardware Acceleration</span>
                <label class="toggle-element list-element">
                    <input id="hardwareAcceleration" type="checkbox">
                    <span class="slider"></span>
                </label>
                <span class="app-prefs-help typography-title-3-tall">Turn on Hardware Acceleration, which uses your GPU to make the application smoother. Turn it off to reduce the overall resource consumption of the application, at the cost of some rendering not being as smooth.</span>
            </li>
            <li class="app-prefs-toggle">
                <span class="typography-title-3-tall">Verbose Logging</span>
                <label class="toggle-element list-element">
                    <input checked id="verboseLogging" type="checkbox">
                    <span class="slider"></span>
                </label>
                <span class="app-prefs-help typography-title-3-tall">When enabled more logs will be posted, used for
                    debugging.</span>
            </li>

            <li class="app-prefs-button">
                <span class="typography-title-3-tall">Copy Log File to Clipboard</span>
                <label class="list-button list-element" id="copyLogFile"
                       onclick="AMSettings.copyLogFile()">Copy File</label>
                <span class="app-prefs-help typography-title-3-tall">Copy your log file to your clipboard, so you can easily paste it into the Discord server or GitHub.</span>
            </li>

            <li class="app-prefs-toggle">
                <span class="typography-title-3-tall">Auto Update Beta Builds</span>
                <label class="toggle-element list-element">
                    <input checked id="autoUpdaterBetaBuilds" type="checkbox">
                    <span class="slider"></span>
                </label>
                <span class="app-prefs-help typography-title-3-tall">This will make the autoUpdater perform updates when
                    a new pre-release is made on GitHub.</span>
            </li>
            <li class="app-prefs-toggle">
                <span class="typography-title-3-tall">Use Apple Music Beta Site</span>
                <label class="toggle-element list-element">
                    <input checked id="useBetaSite" type="checkbox">
                    <span class="slider"></span>
                </label>
                <span class="app-prefs-help typography-title-3-tall">Enabling this makes the application load <a
                        href="https://beta.music.apple.com">beta.music.apple.com</a> instead of <a
                        href="https://music.apple.com">music.apple.com</a>. Disabling this will provide a limited
                    experience on the app.</span>
            </li>
            <li class="app-prefs-toggle">
                <span class="typography-title-3-tall">Prevent Media Key Hijacking</span>
                <label class="toggle-element list-element">
                    <input checked id="preventMediaKeyHijacking" type="checkbox">
                    <span class="slider"></span>
                </label>
                <span class="app-prefs-help typography-title-3-tall">This prevents the Chromium window from hijacking
                    your media key. If you experience issues with pausing or playing videos/media on other applications,
                    enable this.</span>
            </li>
            <li class="app-prefs-divider header-nav">
                <h2 class="shelf-title">Advanced Development Settings</h2>
                <span class="app-prefs-help typography-title-3-tall">These settings are for the use of application
                    developers.</span>
            </li>
            <li class="app-prefs-toggle">
                <span class="typography-title-3-tall">Open DevTools on Startup</span>
                <label class="toggle-element list-element">
                    <input checked id="devToolsOnStartup" type="checkbox">
                    <span class="slider"></span>
                </label>
                <span class="app-prefs-help typography-title-3-tall">This makes the Chromium Dev Tools appear on startup. Read more about them <a
                        href="#" onclick="window.open('https://developer.chrome.com/docs/devtools/')">here</a>.</span>
            </li>
            <li class="app-prefs-toggle">
                <span class="typography-title-3-tall">Allow Multiple Instances</span>
                <label class="toggle-element list-element">
                    <input checked id="allowMultipleInstances" type="checkbox">
                    <span class="slider"></span>
                </label>
                <span class="app-prefs-help typography-title-3-tall">Allows multiple instance of the application to be
                    opened.</span>
            </li>
        </ul>
    </div>
</div>